import React, { Component } from 'react';
import { Text, View } from 'react-native';

/**
 * 自定义组件， 构造函数中设置状态
 */
class Blink extends Component {
    /**
     * 构造函数
     * @param props 属性
     */
    constructor(props) {
        super(props);
        this.state = { showText: true };

        // 定时器操作
        // 每一秒对showText状态做一次取反操作
        setInterval(() => {
            this.setState(previousState => {
                return { showText: !previousState.showText };
            });
        }, 1000);
    }

    /**
     * 渲染
     */
    render() {
        // 根究当前showText的值决定是否显示text内容
        let display = this.state.showText ? this.props.data : ' ';
        return (
            <Text>{display}</Text>
        );
    }
}

/**
 * 状态使用
 */
export default class  BlinkApp extends  Component {
    render() {
        return (
            <View>
                <Blink text='I love to blink'/>
                <Blink text='Yes blinking is so great'/>
                <Blink text='Why did they ever take this out of HTML'/>
                <Blink text='Look at me look at me look at me'/>
            </View>
        );
    }
}
